<template>
	<view class="screen-popup">
		<u-popup width='500' v-model="show" mode='right' z-index='30'>
			<view class="screen-popup-box" :style="{paddingTop: (customBar+5)+'px'}">
				<view class="title title-text">
					筛选
				</view>
				<view class="content-text">
					分类
				</view>
				<u-row>
					<u-col span="4" v-for='item in typeList' :key='item.id' @click='handType(item)'>
						<view :class="item.flg?'type-item':'type-item-active'">
							{{item.name}}
						</view>
					</u-col>
				</u-row>
				<view class="content-text">
					省份
				</view>
				<u-row>
					<u-col span="4" v-for='(item,index) in provinceList' :key='item.label' @click='handProvince(item,index)'>
						<view :class="provinceIndex==index?'type-item':'type-item-active'">
							{{item.value}}
						</view>
					</u-col>
				</u-row>
				<view class="content-text" v-if="cityList.length!=0">
					城市
				</view>
				<u-row v-if="cityList.length!=0">
					<u-col span="4" v-for='(item,index) in cityList' :key='item.label' @click='handCity(item,index)'>
						<view :class="cityIndex==index?'type-item':'type-item-active'">
							{{item.value}}
						</view>
					</u-col>
				</u-row>
				<view style="height: 200rpx;">

				</view>
				<view class="btns">
					<u-button @click="handReset" size='medium' :custom-style="customStyle" plain shape="circle">重 置</u-button>
					<u-button @click="handSubType" ripple size='medium' :custom-style="customStyle" type="jz" shape="circle">确 定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		province
	} from '@/utils/province.js'
	export default {
		data() {
			return {
				cityList: [],
				cityIndex: -1,
				customStyle: {
					width: '220rpx'
				},
				show: false,
				customBar: 0,
				provinceList: province,
				typeList: [{
					name: '材料企业',
					flg: false,
					id: 0
				}, {
					name: '设计企业',
					flg: false,
					id: 1
				}, {
					name: '施工企业',
					flg: false,
					id: 2
				}, {
					name: '住宅企业',
					flg: false,
					id: 3
				}, {
					name: '科技企业',
					flg: false,
					id: 4
				}, ],
				provinceIndex: -1
			};
		},
		mounted() {
			this.customBar = this.CustomBar
		},
		methods: {
			async handReset() {
				this.$emit('handReset')
			},
			handSubType() {


				let companyAddress = ''
				if (this.provinceIndex != -1) {
					companyAddress = this.provinceList[this.provinceIndex].value
				}
				if (this.cityIndex != -1) {
					companyAddress = companyAddress + this.cityList[this.cityIndex].value
				}
				let shoolObj = this.typeList.find((item) => item.flg == true)
				this.$emit('handSubType', shoolObj, companyAddress)
			},
			handCity(item, index) {
				this.cityIndex = index
			},
			handProvince(item, index) {
				if (item.children[0].value == '市辖区') {
					this.cityList = item.children[0].children
				} else {
					this.cityList = item.children
				}
				this.cityIndex = -1
				this.provinceIndex = index
				console.log(this.provinceIndex)
			},
			handType(item) {
				this.typeList.forEach(ele => {
					if (ele.id == item.id) {
						ele.flg = true
					} else {
						ele.flg = false
					}
				})
			},
			open() {
				this.show = true
			},
			hide() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.screen-popup-box {
		padding-left: 20rpx;
		padding-right: 20rpx;

		.btns {
			@include my-flex($jc: $bs-sb);
			width: 100%;
			left: 0;
			position: fixed;
			bottom: 0;
			padding: 20rpx;
			background: #FFFFFF;
			box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
		}

		.type-item {
			@include ellipsisMultiline(1);
			margin-bottom: 30rpx;
			width: 120rpx;
			height: 50rpx;
			background-color: $bs-color-theme;
			font-size: 24rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 6rpx;
			color: #fff;
		}

		.type-item-active {
			@include ellipsisMultiline(1);
			margin-bottom: 30rpx;
			width: 120rpx;
			height: 50rpx;
			background-color: $bs-text-color-fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 6rpx;
			color: $bs-color-theme;
			border: 1px solid $bs-color-theme;
		}

		.content-text {
			margin-bottom: 30rpx;
		}

		.title {
			text-align: center;
			margin: 30rpx 0;
		}
	}
</style>
